<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- v-bind还可以动态地绑定class, 达到动态绑定样式的效果 -->
    <!-- 动态绑定的class, 里面传入一个对象, 键值对的形式 {key:value},value是一个布尔值, 为true则为这个class添加这个key, 反之则不添加 -->
    <h2 :class="{active : isActive, line : isLine}">你好呀</h2>
    <button @click="btnClick()">按钮</button>
    <!-- 如果class的内容过于复杂的话, 可以将class的内容放入methods中 -->
    <h2 :class="getClasses()">你好呀</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        isActive: true,
        isLine: true
      },
      methods: {
        btnClick: function () {
          this.isActive = !this.isActive;
        },
        getClasses: function () { // 调用这个方法的时候返回一个对象
          return {
            active: this.isActive,
            line: this.isLine
          }
        }
      }
    })
  </script>
</body>

</html>